<template>
  <div class="user-profile-container">
    <div class="fake-container">
      <div class="avatar-container">
        <v-avatar size="150">
          <img
              :src="userInfo.avatar"
              alt="John">
        </v-avatar>
      </div>
      <div class="username-container">
        <div class="username">{{ userInfo.nickname }}</div>
      </div>
      <div class="introduction-container">
        <div class="introduction">
          {{ userInfo.signature === "" ? "未设置个性签名" : userInfo.signature }}
        </div>
      </div>
      <div class="detail-container">
        <div class="detail-item">
          <v-icon class="icon" size="18" color="#888" v-text="'fas fa-map-marker-alt'"></v-icon>
          <div class="content">{{ userInfo.province.name }} {{ userInfo.city.name }} {{ userInfo.town.name }}</div>
        </div>
        <div class="detail-item">
          <v-icon class="icon" size="18" color="#888" v-text="'fas fa-birthday-cake'"></v-icon>
          <div class="content">{{ userInfo.age }} 岁</div>
        </div>
        <div class="detail-item">
          <v-icon class="icon" size="18" color="#888" v-text="'fas fa-envelope'"></v-icon>
          <div class="content">{{ userInfo.email === "" ? "未设置邮箱" : userInfo.email }}</div>
        </div>
        <div class="detail-item">
          <v-icon class="icon" size="18" color="#888" v-text="'fas fa-phone'"></v-icon>
          <div class="content">{{ userInfo.username }}</div>
        </div>
      </div>
      <div class="btn-container">
        <div>
          <v-btn
              depressed
              dark
              :color="customerColor"
              rounded
              width="200">
            发消息
          </v-btn>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "userProfile",
  data() {
    return {
      customerColor: '',
      userInfoDetailIcon: ['fas fa-map-marker-alt', 'fas fa-birthday-cake', 'fas fa-envelope', 'fas fa-phone'],
      userInfoDetailContent: ['广东省 广州市 越秀区', '21岁', 'cowjiang@163.com', '13711401096'],
      userInfo: {}
    }
  },
  methods: {},
  mounted() {
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.customerColor = document.getElementsByTagName('body')[0].style.getPropertyValue('--custom-color') ?? '#4746a3';
  }
}
</script>

<style lang="scss" scoped>
@import 'userProfile.scss';
</style>